<template>
  <div class="dishesList">
    <div class="menu-detail">
      <div class="menu-detail-container">
        <div class="top-img">
          <img :src="lis.pic_url" alt="">
          <router-link :to="{ path: '/dishesList'}">
            <div class="back-btn">菜单
              <i></i>
            </div>
          </router-link>

          <div class="cai_box">
            <div class="name_price fl">
              <div class="cai_name">{{ lis.name}}</div>
              <div class="cai_price">￥{{ lis.price/100 }}/份</div>
            </div>
            <div class="title fr">
              <div class="menu-hot"></div>
              <p class="tag" v-if="lis.feature_name">{{ lis.feature_name }}</p>
            </div>
          </div>
        </div>
        <div class="menu-detail-desc">{{ lis.description }}</div>

        <div class="bottom_box">
          <p class="fl c_word">数量：</p>
          <div class="add_minus_box fl">
            <div class="add_btn fl" @click="minus">

            </div>
            <div class="count fl">{{ count }}份</div>
            <div class="minus_btn fl" @click="add">

            </div>
          </div>
          <div class="gwc_btn fr" @click="addToGwc(lis.recipe_id,count)">
            加入购物车
          </div>
        </div>

      </div>
    </div>
    <div class="mask"></div>
    <div class="bugou">特色大鸡爪不够了!</div>
    <div ></div>
  </div>
</template>

<script>
  import bus from '../assets/js/eventBus'
  export default {
    data (){
      return {
        count:1,
        lis:'',
      }
    },
    created (){
      console.log('dd')
      let recipe_id = localStorage.getItem("recipe_id");
      this.$http.get(this.kdUrl.url_host+'version=1&resource=menu&method=recipe_detail&token='+localStorage.getItem("kd_token")+'&recipe_id='+recipe_id).then((res) => {
        console.log('cg')
        console.log(res)
        this.lis = res.body.data
      },(err) => {
        console.log(err)
      })
    },
    mounted (){
      console.log(55);

    },
    methods:{
      add (){
        this.count += 1
      },
      minus (){
        if(this.count == 1){
          this.count = 1
        }else{
          this.count -= 1
        }
      },
      addToGwc (recipe_id,count){
        this.$http.get(this.kdUrl.url_host+'version=1&resource=table&method=orderdishes&token='+localStorage.getItem("kd_token")+'&recipe_id='+recipe_id+'&order_num='+count).then((res) => {
          console.log(res)
          if(res.body.error_code){
            $('.bugou').html(res.body.error_message)
            $('.mask').fadeIn()
            $('.bugou').fadeIn()
            setTimeout(function () {
              $('.mask').fadeOut()
              $('.bugou').fadeOut()
              $('.bugou').html('')
            },2000)
          }else{
            bus.$emit('a-send',res.body.data)
            this.$router.push('/dishesList')
          }
        },(err) => {
          console.log(err);
        })
      }
    }
  }
</script>

<style scoped>
  .menu-detail {
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #eee;
  }
  .menu-detail-container{
    height: 100%;
  }

  .top-img {
    position: relative;
    width: 100%;
    height: 54%;
  }

  .top-img img {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;

  }

  .back-btn {
    position: absolute;
    top: 10px;
    left:10px;
    font-size: 14px;
    border-radius: 10px;
    padding: 3px 10px;
    padding-left: 20px;
    background: #EC313D;
    color: #fff;
  }
  .back-btn i{
    position: absolute;
    border-top: 2px solid #fff;
    border-left:2px solid #fff;
    width: 8px;
    top: 9px;;
    left: 8px;
    height: 8px;
    transform: rotate(-45deg);
  }
  .cai_box{
    font-size: 16px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    overflow: hidden;
  }
  .name_price{
    padding-left: 10px;
    padding-bottom: 10px;

  }
  .cai_name{
    color: #fff;
    margin-bottom: 5px;
    font-weight: 900;
  }
  .cai_price{
    color: #EC313D;
    font-weight: 900;
  }
  .menu-hot{
    background-image: url('../assets/menu_hot.png');
    background-size: contain;
    width: 11px;
    height: 18px;
    background-repeat: no-repeat;
    position: absolute;
    top:10px;
    right: 10px;
  }
  .cai_box .title{
    position: relative;
    padding-top: 25px;
    padding-right: 10px;
  }
  .title .tag{
    font-size: 13px;
    color: #EC313D;
    border: 1px solid #EC313D;
    padding: 1px;
    border-radius: 3px;
  }
  .menu-detail-desc{
    padding-left: 10px;
    padding-top: 10px;
    font-size: 15px;
  }
  .bottom_box{
    height: 55px;
    padding:10px;
    overflow: hidden;
    position: fixed;
    font-size: 15px;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid #ddd;
  }
  .add_minus_box{
    overflow: hidden;
    height: 35px;

  }
  .add_btn,.minus_btn{
    width: 34px;
    height: 35px;
    border:1px solid #ddd;

  }
  .add_btn{
    background-image: url('../assets/add_minus.png');
    background-repeat: no-repeat;
    background-size:41px 13px;
    background-position: -18px  16px;
  }
  .minus_btn{
    background-image: url('../assets/add_minus.png');
    background-repeat: no-repeat;
    background-size:41px 13px;
    background-position:  10px 10px;
  }
  .count{
    height: 35px ;
    padding: 0 10px;
    line-height: 35px;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
  }
  .gwc_btn{
    background: #EC313D;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    line-height: 25px;
    height: 35px;
  }
  .c_word{
    line-height: 35px;
    padding-right: 5px;
    font-weight: 900;
  }
  .bugou{
    height: 35px;
    text-align: center;
    line-height: 35px;
  }
  .bugou{
    display: none;
    position: fixed;
    border-radius: 5px;
    font-size: 13px;
    width: 80%;
    background: #fff;
    top:35%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
  }

</style>
